<template>
  <q-dialog v-model="qrMapDiag">
    <QRMappingDiag @onScanSuccess="onScanSuccess" :qr_string="qrString" :stock_code="createForm.data.stock_code" :serial_no="createForm.data.serial_no"></QRMappingDiag>
  </q-dialog>
  <q-card flat class="col-12 q-pa-sm">
    <q-form @submit.prevent="onSubmit" @validation-error="errorMsg">
      <TabContainer :bot-margin="myAction == 'edit' ? 150 : 150">
        <div class="page-header row justify-between">
          <div class="col-8" v-if="myAction == 'create'">
            <div class="fal">
              <q-item-section avatar>
                <img style="height: 1.7rem" :src="writeIcon" />
              </q-item-section>
              Create New Parts - {{ level }}
            </div>
          </div>
          <div class="col-8" v-if="myAction == 'edit'">
            Edit Part - {{ level }}
          </div>
          <div class="col-8" v-if="myAction == 'preview'">
            Preview - {{ level }}
          </div>
          <q-select
            class="col-4 input-css"
            borderless
            style="width: auto"
            :dense="true"
            :readonly="myAction == 'edit' || myAction == 'preview'"
            v-model="level"
            :options="levelOps"
          />
        </div>
        <q-card flat class="row">
          <div class="row">
            <div
              :class="myAction == 'edit' ? 'col-7 q-pa-sm' : 'col-12 q-pa-sm'"
            >
              <q-card>
                <q-card-section>
                  <div class="sub-header fal">
                    <q-item-section avatar>
                      <img style="height: 1.4rem" :src="penIcon" />
                    </q-item-section>

                    Enter Details
                  </div>
                  <div class="row">
                    <div class="col-4 fal">
                      <q-item-label>Stock Code:</q-item-label
                      ><span style="color: red">*</span>
                    </div>
                    <div class="col-6 q-pa-sm">
                      <q-input
                        class="input-css"
                        borderless
                        v-model="createForm.data.stock_code"
                        :dense="true"
                        hide-bottom-space
                        :readonly="
                          myAction == 'edit' || myAction == 'preview'
                        "
                        :rules="[checkStockCode]"
                      >
                        <template v-slot:append>
                          <q-icon
                            size="md"
                            class="cursor-pointer"
                            v-if="myAction == 'create'"
                            @click="importDevices"
                          >
                            <img :src="searchIcon" />
                          </q-icon>
                        </template>
                      </q-input>
                    </div>
                    <!-- <q-card-actions class="col-4">
                    <q-btn
                      class="bg-blue-7 text-white"
                      v-if="myAction == 'create'"
                      @click="importDevices"
                      icon="search"
          
                      ></q-btn
                    >
                  </q-card-actions> -->
                    <div class="col-4 fal">
                      <q-item-label>Serial No:</q-item-label
                      ><span style="color: red">*</span>
                    </div>
                    <div class="col-8 q-pa-sm">
                      <q-input
                        class="input-css"
                        borderless
                        v-model="createForm.data.serial_no"
                        :dense="true"
                        :readonly="
                          myAction == 'edit' || myAction == 'preview'
                        "
                        lazy-rules
                        hide-bottom-space
                        :rules="[(val) => val.length > 0 || 'Require field']"
                      />
                    </div>

                    <div class="col-4 fal">
                      <q-item-label>System:</q-item-label
                      ><span style="color: red">*</span>
                    </div>
                    <div class="col-8 q-pa-sm">
                      <q-select
                        class="input-css"
                        v-model="createForm.data.system"
                        :options="inputOptionStore.data.system"
                        borderless
                        stack-label
                        :dense="true"
                        lazy-rules
                        :readonly="myAction == 'preview'"
                        hide-bottom-space
                        :rules="[(val) => val.length > 0 || 'Require field']"
                      />
                    </div>

                    <div class="col-4 fal">
                      <q-item-label>Car:</q-item-label>
                    </div>
                    <div class="col-8 q-pa-sm">
                      <q-input
                        class="input-css"
                        borderless
                        v-model="createForm.data.car"
                        :dense="true"
                        lazy-rules
                        :readonly="myAction == 'preview'"
                        hide-bottom-space
                      />
                    </div>
                    <div class="col-4 fal">
                      <q-item-label>Work Group:</q-item-label>
                      <span style="color: red">*</span>
                    </div>
                    <div class="col-8 q-pa-sm">
                      <q-select
                        class="input-css"
                        v-model="createForm.data.workgroup"
                        :options="inputOptionStore.data.workgroup"
                        borderless
                        stack-label
                        :dense="true"
                        :readonly="myAction == 'preview'"
                        lazy-rules
                        hide-bottom-space
                        :rules="[(val) => val.length > 0 || 'Require field']"
                      />
                    </div>
                    <div class="col-4 fal">
                      <q-item-label
                        >Short Description:<span style="color: red"
                          >*</span
                        ></q-item-label
                      >
                    </div>
                    <div class="col-8 q-pa-sm">
                      <q-input
                        class="input-css"
                        borderless
                        v-model="createForm.data.description"
                        :dense="true"
                        lazy-rules
                        :readonly="myAction == 'preview'"
                        hide-bottom-space
                        :rules="[(val) => val.length > 0 || 'Require field']"
                      />
                    </div>

                    <div class="col-4 fal">
                      <q-item-label>Description:</q-item-label>
                    </div>
                    <div class="col-8 q-pa-sm">
                      <div style="max-width: 300px">
                        <q-input
                          class="text-area-css"
                          borderless
                          v-model="createForm.data.detail_description"
                          :readonly="myAction == 'preview'"
                          type="textarea"
                        />
                      </div>
                    </div>

                    <div class="col-4 fal">
                      <q-item-label>Date Code:</q-item-label>
                    </div>
                    <div class="col-8 q-pa-sm">
                      <div style="max-width: 300px">
                        <q-input
                          class="input-css"
                          borderless
                          stack-label
                          hide-bottom-space
                          v-model="createForm.data.date_code"
                          :readonly="myAction == 'preview'"
                          dense
                          :rules="[(val) => dateCodeRule(val)]"
                        >
                          <template v-slot:append>
                            <q-icon
                              class="cursor-pointer"
                              size="md"
                              @click="datePopup = true"
                            >
                              <img :src="dateIcon" />
                            </q-icon>
                          </template>
                        </q-input>
                      </div>
                    </div>
                    <q-dialog v-model="datePopup">
                      <div class="q-pa-md">
                        <div class="q-gutter-md row items-start">
                          <!-- <q-date
                        years-in-month-view
                          mask="YYYY/MM"
                          v-model="createForm.data.date_code"
                          minimal
                          @update:model-value="datePopup = false"
                        /> -->
                          <DateCodeSelect
                            @update="updateCreateFormDateCode"
                          ></DateCodeSelect>
                        </div>
                      </div>
                    </q-dialog>

                    <div class="col-4 fal">
                      <q-item-label>S/W Version:</q-item-label>
                    </div>
                    <div class="col-8 q-pa-sm">
                      <q-input
                        class="input-css"
                        borderless
                        v-model="createForm.data.sw_ver"
                        :readonly="myAction == 'preview'"
                        :dense="true"
                      />
                      <span class="text-indigo-8 text-body2">
                        Multiple version example: version1,version2
                      </span>
                    </div>

                    <div class="col-4 fal">
                      <q-item-label>H/W Version:</q-item-label>
                    </div>
                    <div class="col-8 q-pa-sm">
                      <q-input
                        class="input-css"
                        borderless
                        v-model="createForm.data.hw_ver"
                        :dense="true"
                        :readonly="myAction == 'preview'"
                      />
                      <span class="text-indigo-8 text-body2">
                        Multiple version example: version1,version2
                      </span>
                    </div>

                    <div class="col-4 fal">
                      <div class="fac">
                        <q-item-label>Stock Item Regular Cycle Month:</q-item-label>
                      </div>
                    </div>
                    <div class="col-8 q-pa-sm">
                      <q-input
                        borderless
                        class="input-css"
                        type="number"
                        :min="min_month"
                        :max="max_month"
                        v-model="createForm.data.stock_item_regular_cycle_month"
                        :dense="true"
                      />
                    </div>

                  </div>
                </q-card-section>

                <q-card-section>
                  <div class="sub-header fal">
                    <q-item-section avatar>
                      <img style="height: 1.7rem" :src="sliders" />
                    </q-item-section>

                    Asset Hierarchy
                  </div>
                  <div class="row">
                    <div class="col-4 fal">
                      <q-item-label>Asset ID:</q-item-label>
                    </div>
                    <div class="col-8 q-pa-sm">
                      <q-input
                        class="input-css"
                        borderless
                        :readonly="myAction == 'preview'"
                        v-model="createForm.data.asset_id"
                        :dense="true"
                      />
                    </div>
                    <div class="col-4 fal">
                      <q-item-label
                        >Equipment Class:
                        <span style="color: red">*</span>
                      </q-item-label>
                    </div>
                    <div class="col-6 q-pa-sm">
                      <q-select
                        class="input-css"
                        v-model="createForm.data.equipmentClass"
                        :options="
                          level == 'level 4'
                            ? inputOptionStore.data.equipmentClassLv4
                            : inputOptionStore.data.equipmentClassLv5
                        "
                        borderless
                        :readonly="myAction == 'preview'"
                        stack-label
                        :dense="true"
                        lazy-rules
                        hide-bottom-space
                        :rules="[(val) => val.length > 0 || 'Require field']"
                        use-input
                        @filter="epClassFilterFn"
                      />
                    </div>
                    <div class="col-2 q-pa-sm fal">
                      <q-icon
                        class="cursor-pointer"
                        size="md"
                        @click="importECRelation"
                      >
                        <img :src="searchIcon" />
                      </q-icon>
                    </div>

                    <div class="col-4 fal">
                      <q-item-label>Level 1:</q-item-label
                      ><span style="color: red">*</span>
                    </div>
                    <div class="col-8 q-pa-sm">
                      <q-select
                        class="input-css"
                        v-model="createForm.data.lv1"
                        :options="inputOptionStore.data.lv1"
                        borderless
                        :readonly="myAction == 'preview'"
                        stack-label
                        :dense="true"
                        lazy-rules
                        hide-bottom-space
                        :rules="[(val) => val.length > 0 || 'Require field']"
                      />
                    </div>

                    <div class="col-4 fal">
                      <q-item-label>Level 2:</q-item-label
                      ><span style="color: red">*</span>
                    </div>
                    <div class="col-8 q-pa-sm">
                      <q-select
                        class="input-css"
                        :readonly="myAction == 'preview'"
                        v-model="createForm.data.lv2"
                        borderless
                        :options="inputOptionStore.data.lv2"
                        stack-label
                        :dense="true"
                        lazy-rules
                        hide-bottom-space
                        :rules="[(val) => val.length > 0 || 'Require field']"
                      />
                    </div>

                    <div class="col-4 fal">
                      <q-item-label>Level 3:</q-item-label
                      ><span style="color: red">*</span>
                    </div>
                    <div class="col-8 q-pa-sm">
                      <q-select
                        class="input-css"
                        v-model="createForm.data.lv3"
                        :options="inputOptionStore.data.lv3"
                        borderless
                        :readonly="myAction == 'preview'"
                        stack-label
                        :dense="true"
                        lazy-rules
                        hide-bottom-space
                        :rules="[(val) => val.length > 0 || 'Require field']"
                      />
                    </div>

                    <div class="col-4 fal">
                      <q-item-label>Level 4:</q-item-label
                      ><span style="color: red">*</span>
                    </div>
                    <div class="col-6 q-pa-sm">
                      <q-select
                        class="input-css"
                        v-model="createForm.data.lv4"
                        :readonly="myAction == 'preview'"
                        borderless
                        :options="inputOptionStore.data.lv4"
                        stack-label
                        :dense="true"
                        lazy-rules
                        hide-bottom-space
                        :rules="[(val) => val.length > 0 || 'Require field']"
                        use-input
                        @filter="lv4FilterFn"
                      />
                    </div>
                    <div class="col-2 q-pa-sm fal">
                      <q-icon
                        v-if="level == 'level 4'"
                        class="cursor-pointer"
                        size="md"
                        @click="importLv4Relation"
                      >
                        <img :src="searchIcon" />
                      </q-icon>
                    </div>

                    <div class="col-4 fal" v-if="level == 'level 5'">
                      <q-item-label>Level 5:</q-item-label>
                      <span style="color: red">*</span>
                    </div>
                    <div class="col-6 q-pa-sm" v-if="level == 'level 5'">
                      <q-select
                        class="input-css"
                        :readonly="myAction == 'preview'"
                        v-model="createForm.data.lv5"
                        hide-bottom-space
                        borderless
                        :options="inputOptionStore.data.lv5"
                        stack-label
                        :dense="true"
                        :rules="[(val) => val.length > 0 || 'Require field']"
                        use-input
                        @filter="lv5FilterFn"
                      />
                    </div>
                    <div class="col-2 q-pa-sm fal" v-if="level == 'level 5'">
                      <q-icon
                        class="cursor-pointer"
                        size="md"
                        @click="importLv5Relation"
                      >
                        <img :src="searchIcon" />
                      </q-icon>
                    </div>
                  </div>
                </q-card-section>
              </q-card>
            </div>
            <div
              :class="myAction == 'edit' ? 'col-5 q-pa-sm' : ''"
              v-if="myAction == 'edit'&&p_part_id"
            >
              <QRCodeComponent
                :part_id="p_part_id"
                :qrcode="qrcode"
                :action="'edit'"
              />
              <q-card class="q-my-sm q-pa-sm ">
                <div class="row items-center justify-between">
                  Add Alias QR code data
                  <q-icon
                    name="qr_code"
                    size="40px"
                    color="primary"
                    class="cursor-pointer"
                    @click="scanDiag = true"
                  ></q-icon>
                  <q-dialog v-model="scanDiag">
                    <OpenCam @submit="(v) => onScan(v)"></OpenCam>
                  </q-dialog>
                 
                </div>

                  <li v-for="(item, index) in qrMappingList" :key="index">
                  {{ item }}
                  </li>
          
              </q-card>
            </div>
          </div>
        </q-card>
      </TabContainer>

      <q-card-actions class="justify-evenly" v-if="myAction == 'create'">
        <q-btn class="yellow-btn" type="submit" label="Preview"></q-btn>
      </q-card-actions>

      <q-card-actions class="justify-evenly" v-if="myAction == 'preview'">
        <q-btn
          class="yellow-btn"
          :disable="disableSubmit"
          type="submit"
          label="Save"
        ></q-btn>
      </q-card-actions>

      <q-card-actions class="justify-evenly" v-if="myAction == 'edit'">
        <q-btn class="blue-btn" @click="getPartsData">Reset</q-btn>
        <q-btn class="yellow-btn" type="submit">Save</q-btn>
      </q-card-actions>
    </q-form>

    <q-dialog v-model="preview" full-width full-height>
      <MyDialog title="">
        <PartsForm
          :preview-form="createForm.data"
          :action="'preview'"
          @update="closePreview"
        ></PartsForm>
      </MyDialog>
    </q-dialog>
  </q-card>
</template>

<script setup lang="ts">
import QRCodeComponent from 'src/components/QRCodeComponent.vue';
import {  onMounted,  reactive, ref, watch } from 'vue';
import { useQuasar } from 'quasar';
import { DetailFormType, Parts } from 'src/services/type';
import {
  createQrCode,
  editQrCode,
  getPartDetailData,
} from 'src/services/partsService';
import { formatTimeString, formatDateTimeString } from 'src/utils/dateUtils';
import {
  getStockItemByStockCode,
} from 'src/services/stockCodeService';
import { useInputOption } from 'src/stores/inputOptionStore';
import DateCodeSelect from '../DateCodeSelect.vue';
import writeIcon from 'src/assets/style/write.png';
import penIcon from 'src/assets/style/pen.png';
import dateIcon from 'src/assets/style/date.png';
import searchIcon from 'src/assets/style/search.png';
import sliders from 'src/assets/style/sliders.png';
import MyDialog from '../container/MyDialog.vue';
import TabContainer from '../container/TabContainer.vue';
import {
  importAssetECRelation,
  importAssetLv4Relation,
  importAssetLv5Relation,
} from 'src/services/eqipmentService';
import QRMappingDiag from '../QRMappingDiag.vue';
import OpenCam from 'src/components/OpenCam.vue'
import { getQRFormatList } from 'src/services/qrMapService';

const q = useQuasar();

const levelOps = ['level 4', 'level 5'];
const level = ref('level 4');

const inputOptionStore = useInputOption();
inputOptionStore.init();
const props = defineProps<{
  action: 'create' | 'edit' | 'preview';
  partItem?: Parts;
  previewForm?: DetailFormType;
}>();
const datePopup = ref(false);

const qrString = ref('')
const qrMapDiag = ref(false)
const scanDiag = ref(false)

const p_part_id = ref(props.partItem?.id)

const myAction = ref(props.action);
const myPartItem = ref(props.partItem);
const disableSubmit = ref(false);
const preview = ref(false);

const min_month = ref<number>(1);
const max_month = ref<number>(32767);

const createForm = reactive<{
  data: DetailFormType;
}>({
  data: {
    stock_code: '',
    serial_no: '',
    system: '',
    car: '',
    workgroup: '',
    detail_description: '',
    description: '',
    date_code: '',
    sw_ver: '',
    hw_ver: '',
    obsolescence: 0,
    asset_id: '',
    equipmentClass: '',
    lv1: '',
    lv2: '',
    lv3: '',
    lv4: '',
    lv5: '',
    parent_part_stock_code: '',
    parent_part_serial_number: '',
    stock_item_regular_cycle_month: 36,
  },
});

const qrcode = ref({
  qr_code: '',
  date: '',
  time: '',
});
/* 
watch(
  () => createForm.data.equipmentClass,
  (equipmentClass) => {
    const selected = opt.mapping(equipmentClass);
    if (selected) {
      createForm.data.lv1 = selected.lv1;
      createForm.data.lv2 = selected.lv2;
      createForm.data.lv3 = selected.lv3;
      createForm.data.lv4 = selected.lv4;
    }
  }
);
 */
watch(level, () => {
  if (level.value == 'level 4') {
    createForm.data.lv5 = '';
  }
});

async function importDevices() {
  const res = await getStockItemByStockCode(
    createForm.data.stock_code.toUpperCase()
  );
  if (res.data) {
    if (res.data.lv5.length == 0) {
      level.value = 'level 4';
      createForm.data.lv5 = '';
    } else {
      level.value = 'level 5';
    }
    createForm.data = { ...res.data };
    createForm.data.serial_no = '';
    //for not ready equipmentClass
    createForm.data.asset_id = res.data.asset_id;
    createForm.data.equipmentClass = res.data.equipment_class;
    /*     createForm.data.lv1 = res.data.lv1
    createForm.data.lv2 = res.data.lv2
    createForm.data.lv3 = res.data.lv3
    createForm.data.lv4 = res.data.lv4
    createForm.data.lv5 = res.data.lv5 */
    createForm.data.parent_part_stock_code = '';
    createForm.data.parent_part_serial_number = '';
    createForm.data.obsolescence = 0;
    createForm.data.stock_item_regular_cycle_month = res.data.stock_item_regular_cycle_month;
  }
}

function errorMsg() {
  q.notify({
    color: 'negative',
    position: 'bottom',
    message: 'Check Require Felid',
  });
}

const emit = defineEmits(['update']);

async function onSubmit() {
  if (myAction.value == 'create') {
    preview.value = true;
  }
  if (myAction.value == 'preview' || myAction.value == 'edit') {
    disableSubmit.value = true;
    const qr_code = await save();
    //if my action is preview emit update close dialog and update the qrcode on create form
    console.log(qr_code);

    emit('update', qr_code);
  }
  disableSubmit.value = false;
}
console.log(props.action);

async function save() {
  if (myAction.value == 'preview') {
    const res = await createQrCode(createForm.data);
    if (res.data) {
      return res.data;
    }
    emit('update');
  }
  if (myAction.value == 'edit') {
    if (myPartItem.value) {
      const res = await editQrCode(myPartItem.value.id, createForm.data);
      if (res.data) {
        createForm.data = { ...res.data };
        createForm.data.asset_id = res.data.asset_id;
        createForm.data.equipmentClass = res.data.equipment_class;
        q.notify({
          message: 'success',
          color: 'positive',
        });
        emit('update');
      }
    }
  }
}

async function getPartsData() {
  if (props.partItem?.id) {
    const res = await getPartDetailData(props.partItem?.id);
    if (res.data) {
      if (res.data.lv5.length == 0) {
        level.value = 'level 4';
        createForm.data.lv5 = '';
      } else {
        level.value = 'level 5';
      }
      createForm.data = { ...res.data };
      createForm.data.equipmentClass = res.data.equipment_class;

      const date = formatDateTimeString(res.data.create).split(' ', 1);
      qrcode.value = {
        qr_code: JSON.stringify({
          CAT: `${res.data.stock_code}`,
          SN: `${res.data.serial_no}`,
        }),
        date: date[0],
        time: formatTimeString(res.data.create),
      };
      initQRFormatList()

    }
  }
}

function closePreview(qr_code: any) {
  preview.value = false;

  qrcode.value = {
    qr_code: JSON.stringify(qr_code.qr_code),
    date: qr_code.date,
    time: qr_code.time,
  };
  q.notify({
    message: 'success',
    color: 'positive',
  });

  /*   myAction.value = 'edit'; */
  emit('update');
}

onMounted(() => {
  if (props.partItem) {
    createForm.data = {
      ...props.partItem,
    };
    createForm.data.equipmentClass = props.partItem.equipmentClass;
    createForm.data.parent_part_stock_code = '';
    createForm.data.parent_part_serial_number = '';
  }
  if (props.previewForm) {
    if (props.previewForm.lv5 != '') {
      level.value = 'level 5';
    }
    createForm.data = {
      ...props.previewForm,
    };
  }
  getPartsData();
});
function updateCreateFormDateCode(dateCode: string) {
  createForm.data.date_code = dateCode;
  datePopup.value = false;
}

function dateCodeRule(val: string) {
  if (val == '') {
    return;
  }
  const regex = /^\d{4}\/\d{2}$/;
  return regex.test(val) || 'Date must be in the format "YYYY/MM"';
}

function checkStockCode(val: string) {
  if (val[0] == 's') {
    val = val.toUpperCase();
  }

  const regex = /^(S\d{9}|\d{9})$/;
  return (
    regex.test(val) || 'Stock Code must be in format 9 numbers or S + 9 numbers'
  );
}

async function importECRelation() {
  const res = await importAssetECRelation(createForm.data.equipmentClass);
  if (res) {
    createForm.data.equipmentClass = res.equipment_class;
    createForm.data.lv1 = res.lv1;
    createForm.data.lv2 = res.lv2;
    createForm.data.lv3 = res.lv3;
    createForm.data.lv4 = res.lv4;
    createForm.data.lv5 = res.lv5;
  }
}

async function importLv4Relation() {
  const res = await importAssetLv4Relation(createForm.data.lv4);
  if (res) {
    createForm.data.equipmentClass = res.equipment_class;
    createForm.data.lv1 = res.lv1;
    createForm.data.lv2 = res.lv2;
    createForm.data.lv3 = res.lv3;
    createForm.data.lv4 = res.lv4;
    createForm.data.lv5 = res.lv5;
  }
}

async function importLv5Relation() {
  const res = await importAssetLv5Relation(createForm.data.lv5);
  if (res) {
    createForm.data.equipmentClass = res.equipment_class;
    createForm.data.lv1 = res.lv1;
    createForm.data.lv2 = res.lv2;
    createForm.data.lv3 = res.lv3;
    createForm.data.lv4 = res.lv4;
    createForm.data.lv5 = res.lv5;
  }
}

function epClassFilterFn(val: string, update: any) {
  if (val === '') {
    update(() => {
      inputOptionStore.data.equipmentClass = [...eqClassStringOptions.value];
    });
    return;
  }

  update(() => {
    const needle = val.toLowerCase();
    inputOptionStore.data.equipmentClass = eqClassStringOptions.value.filter(
      (v: string) => v.toLowerCase().indexOf(needle) > -1
    );
  });
}

const eqClassStringOptions = ref<string[]>([]);
const lv4StringOptions = ref<string[]>([]);
const lv5StringOptions = ref<string[]>([]);

setTimeout(() => {
  eqClassStringOptions.value = [...inputOptionStore.data.equipmentClass];
  lv4StringOptions.value = [...inputOptionStore.data.lv4];
  lv5StringOptions.value = [...inputOptionStore.data.lv5];
}, 500);

function lv4FilterFn(val: string, update: any) {
  if (val === '') {
    update(() => {
      inputOptionStore.data.lv4 = [...lv4StringOptions.value];
    });
    return;
  }

  update(() => {
    const needle = val.toLowerCase();
    inputOptionStore.data.lv4 = lv4StringOptions.value.filter(
      (v: string) => v.toLowerCase().indexOf(needle) > -1
    );
  });
}

function lv5FilterFn(val: string, update: any) {
  if (val === '') {
    update(() => {
      inputOptionStore.data.lv5 = [...lv5StringOptions.value];
    });
    return;
  }

  update(() => {
    const needle = val.toLowerCase();
    inputOptionStore.data.lv5 = lv5StringOptions.value.filter(
      (v: string) => v.toLowerCase().indexOf(needle) > -1
    );
  });
}


const qrMappingList = ref([])

function onScan(qr_string: string){
  
  qrString.value = qr_string.replace(/\n/g, '').replace(/^ +| +$/g, '').toString()
  scanDiag.value = false
  qrMapDiag.value = true
}
const $q = useQuasar()
function onScanSuccess(){
  qrMapDiag.value = false
  $q.notify({
    message: 'Success',
    color: 'positive'
  })
  initQRFormatList()
}

async function initQRFormatList(){
  console.log(createForm.data.stock_code, createForm.data.serial_no);
  
  const res = await getQRFormatList(createForm.data.stock_code, createForm.data.serial_no)
  console.log(res.data);
  
  qrMappingList.value = res.data.data
}


</script>

<style></style>
